<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js">
    </script>
</head>
<template id="cpn_id">
    <div>
        当前计数：{{count}}<br/>
        <button v-on:click="add">+</button>
        <button v-on:click="dec">-</button>
    </div>
</template>
<body>
<div id="div_id">
    <!--
    1.count对象是每个cpn1独有的，因为每次都是return一个新的对象
    2.每个cpn1组件所拥有的data,method等是独有的吗？
        data肯定是公共的，照理，methods应该也是公共的
        那么为什么add和dec方法能够区分出每个count呢？-->
    <cpn1></cpn1>
    <cpn1></cpn1>
    <cpn1></cpn1>
</div>
<script>
    Vue.component("cpn1",{
        template:"#cpn_id",
        data(){
            return{
                count:0
            }
        },
        methods: {
            add(){
                this.count++;
            },
            dec(){
                if(this.count>0){
                    this.count--;
                }
            }
        }
    });
    const app=new Vue({
        el:"#div_id"
    })
</script>
</body>
</html>